<script>

import {check, del, Tiania, alter, zcan, rework,labelview} from '@/api/system/axios'
import {getToken} from '@/utils/auth'



export default {
  data() {
    return {
      // 分页器
      total:20,

      flagView: '',
      dialogImageUrl: '',
      headerObj: {
        Authorization: 'Bearer ' + getToken()
      },
      flag: true,
      options: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      value: [],

      select: [],
      userId: '1',
      ids: "",
      dialogVisible: false,
      cname: {
        name: '',
        phone: '',
        userId: ''
      },
      selected: '',
      prefix: '',
      tableData: [],
      index: [],
      classify: {},
      adds: {},
      addg: {
        name: '',
        phone: '',
        avatar: '',
        gender: '男',
        profession: '',
        infos: '',
        location: '',
        labels: '',
      },
      picture: ''
    }
  },

  created() {
    // console.log(this.select)
    // console.log(this.cname)
    // console.log(this.classify)
    //获取信息
    this.request()
    //获取咨询师信息
    zcan().then((item) => {
      // console.log(item.rows)
      this.classify = item.rows
      // console.log(this.classify)

    })
    labelview().then(res => {
      // console.log(res)
      this.options = []
      res.rows.forEach(item => {
        this.options.push({
          label: item.label,
          value: item.label
        })
      })
    })
  },
  methods: {
    // 分页器
    handleCurrentChange(val) {
      // console.log(val,'22222')
      // // this.form.pageNum=val
      // fn({...this.form}).then(res=>{
      //   this.total=Number(res.total)
      //   console.log(this.total)
      //   this.tableData=res.rows
      // })
    },
    // 封装请求
    request() {
      rework().then((item) => {
        console.log(item)
        this.total=item.total
        this.tableData = item.rows
        this.tableData.forEach(item => {
          // console.log(item)
          if (item.status == 0) {
            item.status = "正常"
          } else {
            item.status = "禁用"
          }
        })
      })
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList)
    },
    // // 照片赋值
    handlePictureCardPreview(file) {
      // 照片赋值
      // console.log(file)
      this.addg.avatar = file.fileName
      // this.dialogImageUrl = file.url;
    },
    addname() {
      this.flagView = false
      this.dialogVisible = true
      this.flag = true
      this.addg = {}
    },
    // parseTime,
    can(row) {
      this.flagView = true
      // console.log(row)
      this.dialogVisible = true
      this.flag = false
      const id = row.id || this.ids
      // cangai(id).then(res => {
      //   console.log(res)
      this.addg.id = row.id
      this.addg.location = row.location
      this.addg.labels = []
      row.labels.forEach(item => {
        if (typeof item == "string") {
          this.addg.labels.push(item)
        } else {
          this.addg.labels.push(item.label)
        }
      })
      this.addg.phone = row.phone
      this.addg.name = row.name
      this.addg.avatar = row.avatar
      this.addg.createTime = null
    },

    chu(rows) {
      // console.log(rows)
      const ids = rows.id || this.ids
      this.$modal.confirm('是否确认删除个案咨询档案编号为"' + ids + '"的数据项？').then(() => {
        del(ids).then(res => {
          // console.log(res)
          if (res.code == 200) {
            this.$modal.msgSuccess('删除成功')
            this.request()
          }
        })
      }).catch(() => {
      })
    },
    // 修改咨询师
    logVisibletwo() {
      this.flag = true
      //修改
      alter({...this.addg}).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.adds.avatar = this.addg.avatar
          this.dialogVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.request()
        }
      })
    },
    // 添加咨询师
    logVisible(row) {
      // console.log('ceshi')
      this.addg.userId = this.adds.userId
      Tiania(this.addg).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.dialogVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          // 重新渲染重置页面
          this.request()
        }else {
          this.$message.error(res.msg);
        }
      })

    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field104BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },

    search() {
      check(this.cname).then(res => {
        // console.log(this.cname)
        this.tableData = res.rows
        // console.log(this.tableData)
      })
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()

        })
        .catch(_ => {
          this.flag = true
        })
    },
    // 重置事件
    res() {
      this.cname = {
        name: '',
        phone: '',

      }
      // 重新渲染重置页面
      this.request()
    },
    //
    watchlook(){
      this.$refs.upload.clearFiles()
    }
  }

}
</script>

<template>

  <!--  咨询师管理-->

  <div class="teacher">
    <div class="classify">
      <form>
        <div style="padding-top:30px">
          <span style="margin: 0 7px 0 46px">姓名</span>
          <el-input
            v-model="cname.name" placeholder="请输入姓名" style="width: 15%; " size="small"
          >
          </el-input>
          <span style="margin: 0 7px 0 46px">电话</span>
          <el-input v-model="cname.phone" placeholder="请输入电话" style="width: 20%" size="small"></el-input>
          <el-button
            native-type="reset"
            size="small"
            class="reset"
            @click="res"
          >
            重置
          </el-button>
          <el-button
            @click="search"
            type="primary"
            size="small"
          >
            搜索
          </el-button>
        </div>
        <div class="add">
          <el-button
            style="margin-left: 3%"
            @click="addname"
            type="primary"
            size="small"
          >
            添加
          </el-button>

          <el-dialog
            title="添加"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
            @close="watchlook"
          >

            <div>
              <el-row :gutter="15">
                <el-form ref="elForm" :model="addg" size="medium" label-width="100px">
                  <el-col :span="24">
                    <!--头像上传-->
                    <span style="font-weight: 600;margin-left: 9%">头像</span>
                    <!--                   <div v-show="flagView"-->
                    <!--                        style="width: 148px;height: 148px;display: inline-block;border: 1px solid #aaa;margin-bottom: 3%;margin-right: 3%"-->
                    <!--                   >-->
                    <!--                     <img style="width: 148px;height: 148px;vertical-align: top"-->
                    <!--                          :src="`http://192.168.5.120:8090${addg.avatar}`"-->
                    <!--                     >-->
                    <!--                   </div>-->
                    <el-upload
                      style="display: inline-block;margin-bottom: 3%"
                      :headers="headerObj"
                      ref="upload"
                      :on-success="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      list-type="picture-card"
                      action="http://192.168.5.120:8090/common/upload"
                      :limit="1">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="选择用户">
                      <el-select
                        :value=addg.name
                        v-model="adds"
                        placeholder="请选择用户"
                        clearable
                        value-key="userId"
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item,index) in classify"
                          :key="index"
                          :label="item.nickName"
                          :value="item"
                          :disabled="item.disabled"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                    <el-form-item label="电话" prop="field102" v-model="addg">
                      <el-input v-model="addg.phone" placeholder="请输入电话" :maxlength="50" clearable
                                :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20" class="bzshezi">
                    标志设置：
                    <el-select
                      v-model="addg.labels"
                      multiple
                      filterable
                      allow-create
                      default-first-option
                      placeholder="请选择文章标签"
                    >
                      <el-option
                        v-for="(item,index) in options"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>


                  </el-col>
                  <el-col :span="20">
                    <el-form-item label="擅长专业" prop="field104">
                      <el-input v-model="addg.profession" type="textarea" placeholder="请输入擅长专业" :maxlength="500"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                    <el-form-item label="老师简介" prop="field106">
                      <el-input v-model="addg.infos" type="textarea" placeholder="请输入老师简介" :maxlength="500"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                    <el-form-item label="地址" prop="field108">
                      <el-input v-model="addg.location" placeholder="请输入地址" :maxlength="50" clearable
                                :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                  </el-col>
                </el-form>
              </el-row>
            </div>

            <span slot="footer" class="dialog-footer">

            <el-button type="primary" @click="logVisible" v-show="flag" class="btn">保存</el-button>
            <el-button type="primary" @click="logVisibletwo" v-show="!flag">确定</el-button>
           </span>
          </el-dialog>
        </div>
      </form>
      <div style="margin-left: 3%">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 97%"

          >
            <el-table-column
              type="index"
              prop="this.tableData.index"
              label="序号"
              width="100"
            >
            </el-table-column>


            <el-table-column
              v-model="selected"
              prop="name"
              label="用户名称"
              width="180"
            >
            </el-table-column>


            <el-table-column
              v-model="selected"
              prop="phone"
              label="办公电话"
              width="150"
            >
            </el-table-column>


            <el-table-column
              v-model="selected"
              prop="location"
              label="地址"
              width="150"
            >
            </el-table-column>


            <el-table-column
              prop="status"
              label="状态"
              width="220"
            >
            </el-table-column>


            <el-table-column align="center" label="创建时间">
              <template slot-scope="scope">
                {{ parseTime(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <a class="gai" style="color: #00afff" @click="can(scope.row)">编辑</a>
                <a class="del" @click="chu(scope.row)">删除</a>
              </template>

            </el-table-column>
          </el-table>

        </template>
      </div>
      <!--分页器-->
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
::v-deep .el-pagination ::before{
  text-align: right;
  margin-right: 20px;
}
.add {
  margin: 35px 0 23px 0;
}

.teacher {
  background-color: #f1f2f3;
  padding: 1px 15px;
}

.classify {
  background-color: #FFFFFF;
  margin: 8px 0;
  min-height: calc(100vh - 103px);
}

.reset {
  margin-left: 3%;
}

.add {
  margin-top: 3%;
}

.del {
  margin-left: 5%;
  color: #00afff;
}

.el-upload__tip {
  line-height: 1.2;

}

.el-dialog__header {
  background-color: #1892ff;

}

.el-dialog__headerbtn .el-dialog__close {
  color: #FFFFFF;
}

.el-dialog__title {
  color: #FFFFFF;
}

.bzshezi {
  margin-bottom: 5%;
  margin-left: 3.8%;
  font-weight: 600;
}

.el-icon-delete {
  position: absolute;
  left: 0;
  top: 0;
  padding: 66px;
  background-color: #aaaaaa;
  border-radius: 5px;
  opacity: 0.5;
  display: none;
}

#feather {
  position: relative;
}

</style>
